<template>
	<div class="equipment" style="height: 100%;">
		<el-card class="box-card">
			<div slot="header" class="clearfix" style="display: flex;justify-content: space-between;">
				<span>设备</span>
				<el-button type="text" @click="seach_onoff = !seach_onoff">搜索按钮</el-button>
			</div>

			<el-form ref="form" label-width="110px" style="width: 100%;display: flex; flex-wrap: wrap;" :class="seach_onoff ? 'lz-seach-animation' : 'lz-seach'">
				<el-form-item label="申请单标题" class="lz-el-col" style="min-width: 260px;">
					<el-input v-model="search.name"></el-input>
				</el-form-item>
			</el-form>
			<!-- 数据表格 -->
			<usageTableForm :tableData="tableData" :currentPage="currentPage" :count="count" @changeCurrentPage="changeCurrentPage"></usageTableForm>
		</el-card>

		<el-dialog v-el-drag-dialog title="查看导出记录" :visible.sync="dialogVisible" width="800px">
			<div style="text-align: center;overflow: auto;">
				1111
			</div>
		</el-dialog>
	</div>
</template>

<script>
//非父子组件传值
import bus from '../../../../static/js/bus.js';
//数据表格
import usageTableForm from '@/components/usageTableForm/usageTableForm.vue';
import { mapActions, mapGetters } from 'vuex';
export default {
	name: 'equipment',
	components: {
		usageTableForm
	},
	computed: {
		...mapGetters(['userInfo', 'api']) //获取
		
	},
	data() {
		return {
			dialogVisible:false,//弹框
			//搜索
			seach_onoff:true,
			search:{
				name:''
			},
			//表格数据
			currentPage: 1, //分页中当前第几页
			count: 0, //分页数据总条数
			tableData: [{
				date: '2016-05-02',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			}, {
				date: '2016-05-04',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1517 弄'
			}, {
				date: '2016-05-01',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1519 弄'
			}, {
				date: '2016-05-03',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1516 弄'
			}]
		};
	},
	watch: {},
	mounted() {},
	beforeRouteLeave(to, from, next) {//页面离开时刷新组件防止keep-alive冲突
		bus.$emit('refreshPage')
		next()
	},
	methods: {
		//点击下一页数据或上一页
		changeCurrentPage(val) {
			let that = this;
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
@import './equipment.scss';
//搜索动画显示
.lz-seach {
	
	max-height: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}
.lz-seach-animation {
	animation: lzmover 0.6s ease-in-out forwards;
	display: block;
	overflow: hidden;
}
@keyframes lzmover {
	0% {
		height: 0px;
		opacity: 0;
		margin-bottom: 0px;
	}
	100% {
		height: 100%;
		opacity: 1;
		margin-bottom: 10px;
	}
}
</style>

